<template>
  <!-- tab -->
  <el-tabs
    v-if="type=='tab'"
    class="tab-outsidebar"
    v-model="tabIndex"
    :type="tabCard?'card':null"
    @tab-click="tabClick"
  >
    <el-tab-pane
      v-for="(item, index) in data"
      :key="index"
      :name="index+''"
    >
      <slot
        v-if="expandTitle"
        slot="label"
        name="title"
        :item="item"
        :index="index"
      ></slot>
      <div
        v-else
        class="tab-tittle"
        slot="label"
      >{{item&&typeof item=='object'?item[tabLabelkey]:item}}</div>
      <slot
        :item="item"
        :index="index"
      ></slot>
    </el-tab-pane>
  </el-tabs>
  <!-- 手风琴 -->
  <el-collapse
    v-else-if="type=='collapse'"
    class="tab-outsidebar"
    v-model="tabIndex"
    accordion
    @change="changeClick"
  >
    <el-collapse-item
      v-for="(item, index) in data"
      :key="index"
      :name="index+''"
    >
      <slot
        v-if="expandTitle"
        slot="title"
        name="title"
        :item="item"
        :index="index"
      ></slot>
      <div
        v-else
        class="collapse-tittle"
        slot="title"
      >{{item&&typeof item=='object'?item[collapseLabelkey]:item}}</div>
      <slot
        :item="item"
        :index="index"
      ></slot>
    </el-collapse-item>
  </el-collapse>
  <!-- 轮播 -->
  <el-carousel
    v-else-if="type=='swiper'"
    class="tab-outsidebar"
    :height="swiperHeight+'px'"
    :type="swiperCard?'card':null"
    :initial-index="current"
    :autoplay="swiperInterval?true:false"
    :interval="swiperInterval"
    :loop="swiperLoop"
    indicator-position="outside"
    @change="changeClick"
  >
    <el-carousel-item
      v-for="(item, index) in data"
      :key="index"
    >
      <slot
        :item="item"
        :index="index"
      ></slot>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name:"mm-tab",
  props: {
    data: {// 数据
      type: Array,
      default: null
    },

    current: {// 设置当前的index
      type: [Number, String],
      default: 0
    },

    type: {// 类型：tab、collapse、swiper
      type: String,
      default: "tab"
    },

    tabLabelkey: {// 对应数据的显示值的key
      type: String,
      default: null
    },

    tabCard: {// tab是否显示成卡片
      type: Boolean,
      default: false
    },

    collapseLabelkey: {// 对应数据的显示值的key
      type: String,
      default: null
    },

    swiperHeight: {// swiper的高度，单位px
      type: Number,
      default: 200
    },

    swiperInterval: {// swiper自动播放的时间间隔，单位毫秒
      type: Number,
      default: 0
    },

    swiperLoop: {// swiper是否循环播放
      type: Boolean,
      default: false
    },

    swiperCard: {// swiper是否显示成卡片
      type: Boolean,
      default: false
    },

    expandTitle: {// 是否可以扩展头部
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      tabIndex: "0"
    }
  },

  watch: {
    current() {
      this.tabIndex = this.current + "";
    }
  },

  mounted() {
    this.tabIndex = this.current + "";
  },

  methods: {
    tabClick() {
      this.$emit("change", this.tabIndex);
    },

    changeClick(index) {
      this.$emit("change", index);
    }
  }
}
</script>

<style scoped>
.tab-outsidebar {
  width: 100%;
}

.tab-tittle {
  font-size: 16px;
}

.collapse-tittle {
  font-size: 15px;
}
</style>